<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>用户注册</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            margin-top: 50px;
        }
        .register-form {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .btn-send-code {
            margin-top: 10px;
        }
        .login-link {
            margin-top: 15px;
            text-align: center;
        }
        .alert {
            margin-bottom: 15px;
        }
        .avatar-preview {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 10px auto;
            display: none;
            object-fit: cover;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="register-form">
        <div id="alertContainer">
            <% if (request.getAttribute("error") != null) { %>
            <div class="alert alert-danger" role="alert">
                <%= request.getAttribute("error") %>
            </div>
            <% } %>
            <% if (request.getAttribute("message") != null) { %>
            <div class="alert alert-success" role="alert">
                <%= request.getAttribute("message") %>
            </div>
            <% } %>
        </div>
        
        <ul class="nav nav-tabs" id="registerTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="username-tab" data-bs-toggle="tab" data-bs-target="#username-register" type="button">用户名注册</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="phone-tab" data-bs-toggle="tab" data-bs-target="#phone-register" type="button">手机号注册</button>
            </li>
        </ul>

        <div class="tab-content" id="registerTabContent">
            <!-- 用户名注册 -->
            <div class="tab-pane fade show active" id="username-register">
                <form id="usernameRegisterForm" action="${pageContext.request.contextPath}/user/register" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" class="form-control" id="username" name="username" required
                               pattern="^[a-zA-Z0-9]{6,10}$"
                               title="用户名必须是6-10位字母或数字">
                        <small class="form-text text-muted">用户名必须是6-10位字母或数字</small>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="password" required
                               pattern="^[A-Z][a-zA-Z0-9]{5,9}$"
                               title="密码必须以大写字母开头，长度6-10位">
                        <small class="form-text text-muted">密码必须以大写字母开头，长度6-10位</small>
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="avatar">头像</label>
                        <input type="file" class="form-control" id="avatar" name="avatar" accept="image/*" onchange="previewAvatar(this)">
                        <img id="avatarPreview" class="avatar-preview" alt="头像预览">
                    </div>
                    <button type="submit" class="btn btn-primary w-100">注册</button>
                </form>
            </div>

            <!-- 手机号注册 -->
            <div class="tab-pane fade" id="phone-register">
                <form id="phoneRegisterForm" action="${pageContext.request.contextPath}/user/register/phone" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="phone">手机号</label>
                        <input type="tel" class="form-control" id="phone" name="phone" required
                           pattern="^1[3-9]\d{9}$"
                            title="请输入正确的手机号">
                    </div>
                    <div class="form-group">
                        <label for="verificationCode">验证码</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="verificationCode" name="verificationCode" required>
                            <button type="button" class="btn btn-outline-primary" id="sendCodeBtn">发送验证码</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="phonePassword">密码</label>
                        <input type="password" class="form-control" id="phonePassword" name="password" required
                               pattern="^[A-Z][a-zA-Z0-9]{5,9}$"
                               title="密码必须以大写字母开头，长度6-10位">
                        <small class="form-text text-muted">密码必须以大写字母开头，长度6-10位</small>
                    </div>
                    <div class="form-group">
                        <label for="phoneEmail">邮箱</label>
                        <input type="email" class="form-control" id="phoneEmail" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="phoneAvatar">头像</label>
                        <input type="file" class="form-control" id="phoneAvatar" name="avatar" accept="image/*" onchange="previewPhoneAvatar(this)">
                        <img id="phoneAvatarPreview" class="avatar-preview" alt="头像预览">
                    </div>
                    <button type="submit" class="btn btn-primary w-100">注册</button>
                </form>
            </div>
        </div>

        <div class="login-link">
            <p>已有账号？<a href="${pageContext.request.contextPath}/login">立即登录</a></p>
        </div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script>
    function showAlert(message, type = 'danger') {
        const alertContainer = document.getElementById('alertContainer');
        alertContainer.innerHTML = `
            <div class="alert alert-\${type} alert-dismissible fade show" role="alert">
                \${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
    }

    function previewAvatar(input) {
        const preview = document.getElementById('avatarPreview');
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.style.display = 'block';
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    function previewPhoneAvatar(input) {
        const preview = document.getElementById('phoneAvatarPreview');
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.style.display = 'block';
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    document.getElementById('sendCodeBtn').addEventListener('click', function() {
        const phone = document.getElementById('phone').value;
        if (!phone) {
            showAlert('请输入手机号');
            return;
        }
        
        // 发送验证码请求
        fetch('${pageContext.request.contextPath}/api/user/send-code?phone=' + phone, {
            method: 'POST'
        })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                showAlert(data.error);
            } else {
                showAlert('验证码已发送', 'success');
                // 开始倒计时
                let countdown = 60;
                const btn = this;
                btn.disabled = true;
                const timer = setInterval(() => {
                    btn.textContent = countdown + '秒后重新发送';
                    countdown--;
                    if (countdown < 0) {
                        clearInterval(timer);
                        btn.disabled = false;
                        btn.textContent = '发送验证码';
                    }
                }, 1000);
            }
        })
        .catch(error => {
            showAlert('发送验证码失败');
        });
    });
</script>
</body>
</html>